<template>
	<div id="buildingUnitList">
		<!--工具条-->
		<div name="searchColums" id="searchColums_unit">
			<el-form :inline="true" :model="unitFilters" size="small" ref="unitFilters" class="searchForm">
				<el-form-item class="el-form-item" label="单元名称">
					<el-input v-model="unitFilters.unitName" name="unitName" auto-complete="off" placeholder="请输入单元名称"></el-input>
				</el-form-item>
				<span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getBuildingUnit(true)">查询</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetUnitForm('unitFilters')">重置</el-button>
			    	</el-form-item>
				</span>
			</el-form>
		</div>
		<!--toolbar-->
		<el-row id="toolbar_unit">
			<el-col :span="24">
				<div class="grid-content bg-purple-light">
					<el-button type="primary" size="mini" icon="el-icon-edit" @click="handleAddUnit">新增</el-button>
					<el-button type="primary" size="mini" @click="batchRemoveUnit" :disabled="this.unitSels.length===0" icon="el-icon-delete">批量删除</el-button>
					<!--<el-button type="primary" size="mini" @click="templeteDown"  icon="el-icon-download">模板下载</el-button>-->
					<!--<el-button type="primary" size="mini" @click="templeteUp"  icon="el-icon-upload">导入</el-button>-->
				</div>
			</el-col>
		</el-row>

		<!--列表-->
		<el-table :data="buildingUnitDatas" id="unitDataGrid" empty-text=" " height="410" border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listunitLoading" :row-class-name="tableRowClassName" @sort-change="handleUnitSortChange" @selection-change="selsChangeUnit" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="buildingName" label="所属楼名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="unitName" label="单元名称" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="sort" label="排序" v-if="false"></el-table-column>
			<el-table-column label="操作" width="160">
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEditUnit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="mini" @click="handleDelUnit(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
			<el-table-column label=""></el-table-column>
		</el-table>

		<!--工具条-->
		<el-col :span="24" class="toolbar" id="unitpageDiv">
			<el-pagination small background @current-change="handleUnitCurrentChange" @size-change="handleUnitSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="unitpageSize" :total="unittotal" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>

		<!--编辑界面-->
    <el-dialog title="编辑" :visible.sync="editUnitFormVisible" :close-on-click-modal="false"
               @close="resetForm('editUnitForm')">
			<el-form :model="editUnitForm" label-width="80px" :rules="addUnitFormRules" ref="editUnitForm" size="mini">
				<el-input v-model="editUnitForm.buildingId" type="hidden" style="display: none!important;"></el-input>
				<el-form-item label="单元名称" prop="unitName">
					<el-input v-model="editUnitForm.unitName" auto-complete="off" placeholder="请输入单元名称"></el-input>
				</el-form-item>
				<el-form-item label="负责人" prop="safeUser">
					<el-input v-model="editUnitForm.safeUser" auto-complete="off" placeholder="请输入负责人"></el-input>
				</el-form-item>
				<el-form-item label="保洁" prop="cleaningUser">
          <el-input v-model.number="editUnitForm.cleaningUser" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="序号" prop="sort">
          <el-input v-model.number="editUnitForm.sort" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="editUnitFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="editUnitSubmit" :loading="editUnitLoading">提交</el-button>
			</div>
		</el-dialog>

		<!--新增界面-->
    <el-dialog title="新增" :visible.sync="addUnitFormVisible" :close-on-click-modal="false"
               @close="resetForm('addUnitForm')">
			<el-form :model="addUnitForm" label-width="80px" :rules="addUnitFormRules" ref="addUnitForm" size="mini">
				<el-input v-model="addUnitForm.buildingId" type="hidden" style="display: none!important;"></el-input>
				<el-form-item label="单元名称" prop="unitName">
					<el-input v-model="addUnitForm.unitName" auto-complete="off" placeholder="请输入单元名称"></el-input>
				</el-form-item>
				<el-form-item label="负责人" prop="safeUser">
					<el-input v-model="addUnitForm.safeUser" auto-complete="off" placeholder="请输入负责人"></el-input>
				</el-form-item>
				<el-form-item label="保洁" prop="cleaningUser">
          <el-input v-model.number="addUnitForm.cleaningUser" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="序号" prop="sort">
          <el-input v-model.number="addUnitForm.sort" auto-complete="off" placeholder="请输入"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addUnitFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addUnitSubmit" :loading="addUnitLoading">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'
	export default{
		name:'buildingUnitList',
		data(){
			return{
                //单元过滤条件
                unitFilters: {
                    unitName:''
                },
                url:{

                    //单元数据
                    unitList:"/admin/buildingUnit/page",
                    unitDel:'/admin/buildingUnit/doDel',
                    unitBatchDel:'/admin/buildingUnit/doBatchDel',
                    unitSave:'/admin/buildingUnit/doAdd',
                    unitEdit:'/admin/buildingUnit/doUpdate',

                },
                buildingUnitDatas:[],
                unitsort:{
                    sort:'sort',
                    order:'asc'
                },
                treeId:"",
                communityId:"",
                unittotal: 0,
                unitpage: 1,
                unitpageSize:10,
                listunitLoading:false,
                unitSels:[],
                editUnitLoading: false,
                addUnitLoading:false,
                //单元
                addUnitFormVisible: false,
                addUnitFormRules: {
                  unitName: [
                    {required: true, message: '请输入单元名称'}
                  ],
                  sort: [
                    {type: 'number', message: '请输入数字'}
                  ]
                },
                addUnitForm: {},
                editUnitFormVisible: false,
                editUnitForm: {}

      }
		},
		methods: {
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
			handleUnitSortChange(sort){
                this.unitsort={
                    sort:sort.prop,
                    order:sort.order=='ascending'?'asc':'desc'
                };
                this.getBuildingUnit();
            },
            tableRowClassName(row, index) {
                //把每一行的索引放进row
                row.index = row.rowIndex
            },
            headStyle({ row, rowIndex }){
                return "table_head_style";
            },
            index_formatter:function(row, column ,cellValue,index) {
                //放回索引值
                return (this.unitpageSize * (this.unitpage - 1)  + 1+ index);
            },
            handleUnitCurrentChange(val) {
                this.unitpage = val;
                this.getBuildingUnit();
            },
            handleUnitSizeChange(val) {
                this.unitpageSize = val;
                this.unitpage = 1;
                this.getBuildingUnit();
            },
            resetUnitForm(formName) {
                this.unitFilters= {
                    unitName:''
                }
            },
            selsChangeUnit: function (sels) {
                this.unitSels = sels;
            },
            //批量删除单元
            batchRemoveUnit: function () {
                var ids = this.unitSels.map(item => item.id).toString();
                this.$confirm('确认删除选中记录吗？', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listunitLoading = true;
                    let para = { ids: ids };
                    request.get(this.url.unitBatchDel,{params:para}).then((res) => {
                        this.listunitLoading = false;
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:1500
                        });
                        this.getBuildingUnit();
                    });
                }).catch(() => {
                });
            },
            //单元相关方法
            //删除
            handleDelUnit: function (index, row) {
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listunitLoading = true;
                    let para = { id: row.id };
                    request.get(this.url.unitDel,{params:para}).then((res) => {
                        this.listunitLoading = false;
                        this.$message({
                            message: '删除成功',
                            type: 'success',
                            duration:1500
                        });
                        this.getBuildingUnit();
                    });
                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEditUnit: function (index, row) {
                this.editUnitFormVisible = true;
                this.editUnitForm = Object.assign({}, row);
            },
            //显示新增界面
            handleAddUnit: function () {
                this.addUnitFormVisible = true;
                this.addUnitForm = {
                    buildingId:this.treeId,
                    communityId:this.communityId
                };
            },
            //编辑
            editUnitSubmit: function () {
                this.$refs.editUnitForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.editUnitLoading = true;
                            let para = Object.assign({}, this.editUnitForm);
                            request.post(this.url.unitEdit,para).then((res) => {
                                this.editUnitLoading = false;
                                if(!res.data.data){
                          			this.$message({message: res.data.msg,type: 'error',duration: 1500});
                          			return;
                          		}
                                this.$message({
                                    message: '提交成功',
                                    type: 'success',
                                    duration:1500
                                });
                                this.$refs['editUnitForm'].resetFields();
                                this.editUnitFormVisible = false;
                                this.getBuildingUnit();
                            });
                        });
                    }
                });
            },
            //新增
            addUnitSubmit: function () {
                this.$refs.addUnitForm.validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addUnitLoading = true;
                            let param = Object.assign({}, this.addUnitForm);
                            request.post(this.url.unitSave,param).then((res) => {
                                this.addUnitLoading = false;
                                if(!res.data.data){
                          			this.$message({message: res.data.msg,type: 'error',duration: 1500});
                          			return;
                          		}
                                this.$message({
                                    message: '提交成功',
                                    type: 'success',
                                    duration:1500
                                });
                                this.$refs['addUnitForm'].resetFields();
                                this.addUnitFormVisible = false;
                                this.getBuildingUnit();
                            });
                        });
                    }
                });
            },
            //获取单元列表数据
            getBuildingUnit(flag) {
                //获取当前树节点选中小区
                if(flag){
      				this.unitpage = 1;
      			}
                var buildingId = this.treeId;
                let para = {
                    params: {
                        page: this.unitpage,
                        limit: this.unitpageSize,
                        //排序
                        orderByField:this.unitsort.sort,
                        isAsc:this.unitsort.order,
                        unitName:this.unitFilters.unitName,
                        buildingId:buildingId
                    }
                };
                this.listunitLoading = true;
                request.get(this.url.unitList,para).then((res) => {
                    this.unittotal = res.data.total;
                    var datas=res.data.records;
                    this.buildingUnitDatas = datas;
                    this.listunitLoading = false;
                    this.$emit('reload-treeNode');
                });
            }
		},
		mounted() {
			this.getBuildingUnit();
		}
	}
</script>
